<script setup lang="ts">
import { reactive, ref, watch } from 'vue'

const food = ref('炒饭')
const drink = ref('奶茶')
const user = reactive({
  name: '张三',
  info: {
    age: 18,
    sex: '男',
  },
})

// 侦听器
// 侦听一个数据
watch(food, () => {
  console.log('food修改')
})
// 侦听多个数据
watch([food, drink], () => {
  console.log('food或drink修改')
})
// 侦听对象数据中的一个属性（基本类型）
watch(
  () => user.name,
  () => {
    console.log('user.name修改')
  },
)
// 侦听对象数据中的一个属性（复杂类型）
watch(
  () => user.info,
  () => {
    console.log('user.info修改')
  },
  // 侦听复杂属性时，默认不侦听嵌套属性的变化
  {
    // 如果需要侦听嵌套属性的变化，需要配置deep参数
    deep: true,
    // 如果需要在页面加载时默认执行侦听器，需要配置immediate参数
    immediate: true,
  },
)
</script>

<template>
  <div>
    <h2 @click="food += '炒面'">{{ food }}</h2>
    <h2 @click="drink += '奶茶'">{{ drink }}</h2>
    <h2>{{ user }}</h2>
    <button @click="user.name += '李四'">修改姓名</button>
    <button @click="user.info.age += 1">修改年龄</button>
    <button @click="user.info.sex = !user.info.sex">修改性别</button>
    <button @click="user.info = { age: 20, sex: '女' }">修改对象</button>
  </div>
</template>

<style></style>
